import React from 'react'
import swiper from 'swiper'
import 'swiper/css/swiper.css'
class Banner extends React.Component {
    constructor() {
        super();
        this.state = {
            imgList: [
                require("../../img/ft (8).jpg").default,
                require("../../img/ft (18).jpg").default,
                require("../../img/ft (23).jpg").default
            ]
        }
    }
    render() {
        // let { imglist } = this.state;
        // console.log(this.props)
        let {imgList} =this.props
        return (
            <div>
                <div className="swiper-container" ref={(bannerbox) => { this.banner = bannerbox }}>
                    <div className="swiper-wrapper">
                        {
                            this.state.imgList.map((item, index) => {
                                return <div key={index} className="swiper-slide">
                                    <img src={item} className="Img" style={{ width: `${100}%` }} />
                                </div>
                            })
                        }

                    </div>
                    {
                        this.props.flag !== false?<div className="swiper-pagination" ref={(pagination) => { this.pagination = pagination }}
                        style={{ position: 'absolute', bottom: 41 + '%', zIndex: 9999 }}>1</div>:null
                    }
                    
                </div>
            </div>
        )
    }
    componentDidMount() {
        new swiper(this.banner, {
            direction: 'horizontal', // 垂直切换选项
            loop: true,
            autoplay: {
                delay: 1000,
            },
            preventClicksPropagation: true,
            pagination: {
                el: this.pagination,
                clickable: true,
            },
        })
    }
}
export default Banner